<template>
  <div style="margin-top: 70px;margin-left: 400px;">
  <!-- 患者信息和返回按钮 -->
    <div class="patient-info">
      <div>
       科室: {{ patientInfo.officeCode }}　房间号: {{ patientInfo.wardCode }}　病人姓名: {{ patientInfo.name }}　
       病人编号: {{ patientInfo.patientCode }}　
       <el-button @click="returnToList" type="primary" plain>返回</el-button>
      </div>
    </div>
  </div>
  <!-- 费用明细表格 -->

<el-table :data="getpayitem" border style="width: 100%;margin-top: 50px;" :cell-style="cellStyle" :header-cell-style="headerCellStyle">
    <el-table-column prop="id" label="id" width="200" />
    <el-table-column prop="itemName" label="花费项目" width="270" />
    <el-table-column prop="itemType" label="花费类型" width="270" />
    <el-table-column prop="items" label="费用明细项" width="270" />
    <el-table-column prop="price" label="价格" width="270" />
    <el-table-column prop="isReimbursement" label="是否报销" width="290">
        <template v-slot="scoped">
             <span v-if="scoped.row.isReimbursement==0">否</span>
             <span v-if="scoped.row.isReimbursement==1">是</span>
             <span v-if="scoped.row.isReimbursement==2">自费</span>
        </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref, computed, onMounted, watch, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import http from '@/api/http.js'

const router = useRouter()
const route = useRoute()


// 患者信息
const patientInfo = reactive({
  name: '',
  officeCode: '',
  patientCode: '',
  wardCode: ''
})

let a = JSON.parse(route.query.a)
const getpatient = () => {
  http.get('/api/PatientController/GetByPatientId?id=' + a.patientCode).then((res) => {
    Object.assign(patientInfo,res.data[0])
  })
}

//缴费明细列表
const getpayitem=ref([])
const getpayitemlist=()=>{
  http.get("/api/PayItemController/GetPayItemList")
  .then(res=>{
    getpayitem.value=res
  })
}

// 单元格内容居中样式
const cellStyle = {
  textAlign: 'center',
  verticalAlign: 'middle'
}

// 表头居中样式
const headerCellStyle = {
  textAlign: 'center',
  backgroundColor: '#F5F7FA',
  color: '#606266',
  fontWeight: 'bold',
  verticalAlign: 'middle'
}

// 获取费用明细数据
const getPayDetails = (patientCode) => {
  if (!patientCode) return

  http.get(`/api/PayInfoController/GetPayDetails`, {
      params: {
        patientCode: patientCode
      }
    })
    .then((res) => {
      if (res && res.data && Array.isArray(res.data)) {
        feeDetails.value = res.data.map((item) => ({
          ...item,
          // 确保价格数据格式正确
          price: parseFloat(item.price || 0),
          // 将是否报销值转换为布尔值
          isReimbursable: item.isReimbursable === '是' || item.isReimbursable === true
        }))
      }
    })
    .catch((err) => {
      console.error('获取费用明细失败:', err)
    })
}

// 返回列表页
const returnToList = () => {
  router.push('/payInfo')
}

onMounted(() => {
  getpatient()
  getpayitemlist()
})
</script>
